// 存储所有 port
// 每打开多同一个标签页，都会产生多一个属于当前标签页的 messageEvent, 需要存储起来，
// 当【同属一个标签页的】其他页发送消息时，就能通过广播发送给【同属一个标签页的】所有的标签页
this.ports = [];

/**
 * SharedWorker 是 worker 的一种应用方式，所有注意事项的 Worker 一致：
 * 1. 共享线程的上下文为自身，可以通过 this 或 self 来获取
 * 2. 主线程和共享线程之间传递消息是复制而不是分享，如果传递参数是 一个对象，会通过 JSON 方式来编码/解码
 * 3. 子线程和主线程是不同上下文，不同作用域，因此不能调用 主线程的 dom 和方法，具体有：
 *    3.1.  window 对象，document 对象，parent 对象，alert, confirm
 *    3.2.  可以使用：navigator 对象，location 对象（只读），XMLHttpRequest，计时器，应用缓存，使用 importScript() 方法导入外部脚本
 *          其他的 web Worker 
 * 4. 因为有同源限制，所有要在同一个服务器才能看到信息共享效果
 * */ 

onconnect = (e) => {
  const port = e.ports[0]
  // console.log(port)
  !this.ports.includes(port) && this.ports.push(port);
  // 监听里路篮球标签页发生的消息
  port.onmessage = (eve) => {
    switch(eve.data) {
      case 'close': 
        clearInvaliPort(port);
        break;
      default:
        // 广播：给所有 port 发消息
          broadcast(eve.data)
        break;
    }
  }
}

function broadcast(message) {
  console.log('ports', this.ports);
  this.ports.forEach(port => {
    // 给标签页发生消息
    port.postMessage(message)
  });
}

function clearInvaliPort(port) {
  const index = this.ports.findIndex(item => item === port)
  if (~index) {
    console.log('index:'+ index)
    this.ports.splice(index, 1)
  }
  console.log(ports)
}

